//折线图组件
import * as echarts from 'echarts/core'
// import { GridComponent } from 'echarts/components'
import { BarChart, LineChart, ParallelChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components'
// import { LineChart } from 'echarts/charts'
// import { UniversalTransition } from 'echarts/features'
// import { CanvasRenderer } from 'echarts/renderers'
//折线图封装
var myChart4
function initTemperatureChange(chartDom, xAxisData, tempMinseries, tempMaxseries) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    MarkPointComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
  ]);
  if (myChart4 != null && myChart4 != undefined) {
    myChart4.dispose();
  }

  var myChart4 = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: tempMaxseries,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        type: 'line',
        data: tempMinseries,
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        }
      }
    ]
  };

  myChart4.setOption(option);
  return myChart4;
}
var myChart1

function initBasicLineChart(chartDom, xAxisData, seriesData) {
  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
  // var chartDom = document.getElementById('main')
  // //此种是JavaScript中获取html文档中dom元素的方式，但vue中不适用。
  //判断图表实例是否为空，如果不为空的进行销毁
  if (myChart1 != null && myChart1 != undefined) {
    myChart1.dispose();
  }
  myChart1 = echarts.init(chartDom)
  var option
  option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: seriesData,
        type: 'line',
      },
    ],
  }
  option && myChart1.setOption(option)
}
var myChart2

function initStackeAreaChart(chartDom, xAxisData, tempMinseries, tempMaxseries) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
  ])
  if (myChart2 != null && myChart2 != undefined) {
    myChart2.dispose();
  }

  // var chartDom = document.getElementById('main');
  myChart2 = echarts.init(chartDom)
  var option

  option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['tempMin', 'tempMax'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'tempMin',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: tempMinseries,
      },
      {
        name: 'tempMax',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: tempMaxseries,
      },
    ],
  }

  option && myChart2.setOption(option)
}

var myChart3
function initBasicBar(chartDom, xAxisData, seriesData) {
  echarts.use([GridComponent, BarChart, CanvasRenderer]);

  // var chartDom = document.getElementById('main');
  if (myChart3 != null && myChart3 != undefined) {
    myChart3.dispose();
  }
  var myChart3 = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'bar'
      }
    ]
  };

  option && myChart3.setOption(option);
}
export { initBasicLineChart, initStackeAreaChart, initBasicBar, initTemperatureChange }